<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css"/>
    <script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>
    <script type ="text/javascript ">
        $(document).ready(function () {
           findbooks();
        });
        function findbooks() {
          $.post("/findbooks",null,
              function (data) {
                  $.each(data,function(){
                      var tr  = $("<tr/>");
                 var tdimg=$("<img/>").attr("src","images/"+this.images).attr("height",60).appendTo("<td/>").appendTo(tr);
                   $("<td/>").html(tdimg).appendTo (tr );
                      $("<td/>").html(this.name).appendTo(tr);
                      $("<td/>").html(this.author).appendTo(tr);
                      $("#booktable").append(tr);
                  })
              },"json");
        }

    </script>


</head>
<body>
<div class="panel panel-primary " >
    <div class="panel-heading " >
        <h3 class="panel-title " > Spring boot 中集合转换 List-json</h3>
    </div>

</div>
<!--内容区域-->
<div class="container " >
    <div class="col-md-12" >
        <div class="panel panel-info " >
            <!--列表标题区域-->
          <div class="panel-heading " >
              <h3 class="panel-title " >图书信息列表</h3>
          </div>
            <div class="panel-body" >
                <div class="table table-responsive" >
                    <table class="table table-bordered  table-hover" id="booktable"  >
                        <thead>
                        <tr>
                            <th class="text-center" >封面</th>
                            <th class="text-center" >书名</th>
                            <th class="text-center" >作者</th>
                        </tr>
                        </thead>
                        <tbody class="text-center"></tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>


</body>
</html>